<!DOCTYPE html>
<html>
<head>
  <title th:text="${application.wgName}">WGClOUD监控系统</title>
  <div  th:replace="common/header.html"></div>



</head>
<body class="hold-transition sidebar-mini layout-fixed">

<div class="wrapper">


  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper" style="margin-left: 10px">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <a href="###"  target="_blank">
              <img th:src="${application.logoUrl}"style="height:25px;width:25px;opacity: .8" class="brand-image img-circle elevation-3">&nbsp;<span th:text="${application.wgName}">CLOUDTI</span>
            </a>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item active">监控概要</li>
              <li class="breadcrumb-item "><a href="/wgcloud/systemInfo/systemInfoList?dashView=1">主机列表</a></li>
              <!--<li class="breadcrumb-item active"><a  target="_blank" href="https://###/elasticsearch-head/index.html">ES监控工具</a></li>-->
            </ol>
          </div><!-- /.col -->
         <!-- <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Dashboard v1</li>
            </ol>
          </div>--><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
        <!-- Small boxes (Stat box) -->


        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner" title="已下线/总数量">
                <h3><font color="#DCDCDC"  th:text="${downAppSize}">0</font>/<span th:text="${totalSizeApp}">1</span></h3>

                <p>监控进程</p>
              </div>
              <div class="icon">
                <i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/wgcloud/static/images/jincheng.png"/></i>
              </div>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-olive">
              <div class="inner" title="已下线/总数量">
                <h3><font color="#DCDCDC"  th:text="${downDockerSize}">0</font>/<span th:text="${dockerSize}">1</span></h3>


                <p>DOCKER</p>
              </div>
              <div class="icon">
                <i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/wgcloud/static/images/docker.png"/></i>
              </div>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner" title="已下线/总数量">
                <h3><font color="#DCDCDC"  th:text="${dbInfoDownSize}">0</font>/<span th:text="${dbInfoSize}">1</span></h3>


                <p>数据源</p>
              </div>
              <div class="icon">
                <i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/wgcloud/static/images/db.png"/></i>
              </div>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner" title="已下线/总数量">
                <h3><font color="#DCDCDC"  th:text="${dceDownSize}">0</font>/<span th:text="${dceSize}">1</span></h3>

                <p>数通设备</p>
              </div>
              <div class="icon">
                <i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/wgcloud/static/images/yun.png"/></i>
              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->

        <!-- Small boxes (Stat box) -->
        <div class="row">
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner">
                <h3 th:text="${fileWarnSize}"></h3>

                <p>日志监控</p>
              </div>
              <div class="icon">
                <i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/wgcloud/static/images/log.png"/></i>
              </div>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-info">
              <div class="inner" title="已下线/总数量">
                <h3><font color="#DCDCDC"  th:text="${heatherrSize}">0</font>/<span th:text="${heathSize}">1</span></h3>


                <p>服务接口</p>
              </div>
              <div class="icon">
                <i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/wgcloud/static/images/api.png"/></i>
              </div>
            </div>
          </div>
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-purple">
              <div class="inner"  title="已下线/总数量">
                <h3><font color="#DCDCDC"  th:text="${hostDownSize}">0</font>/<span th:text="${totalSystemInfoSize}">1</span></h3>


                <p>监控主机</p>
              </div>
              <div class="icon">
                <i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/wgcloud/static/images/pc.png"/></i>
              </div>
            </div>
          </div>
          <!-- ./col -->
          <!-- ./col -->
          <div class="col-lg-3 col-6">
            <!-- small box -->
            <div class="small-box bg-success">
              <div class="inner" title="已下线/总数量">
                <h3><font color="#DCDCDC"  th:text="${portDownSize}">0</font>/<span th:text="${portSize}">1</span></h3>

                <p>端口监控</p>
              </div>
              <div class="icon">
                <i class="ion " style="opacity:0.6; filter: alpha(opacity=60);"><img src="/wgcloud/static/images/telnet.png"/></i>
              </div>
            </div>
          </div>
        </div>
        <!-- /.row -->

        <div class="row  mb-2">
          <div class="col-sm-12" style="font-weight: 500">当前所有主机最近5分钟状态，下行带宽速率：
            最高<span class="description-percentage text-danger"><i class="fas fa-caret-down"></i> <span th:text="${maxRxbyt}">18</span></span>
            &nbsp;平均<span class="description-percentage text-warning"><i class="fas fa-caret-left"></i> <span th:text="${avgRxbyt}">0</span></span>
            &nbsp;最低<span class="description-percentage text-success"><i class="fas fa-caret-up"></i> <span th:text="${minRxbyt}">17</span></span>
            &nbsp;&nbsp;&nbsp;&nbsp;上行带宽速率：最高<span class="description-percentage text-danger"><i class="fas fa-caret-down"></i> <span th:text="${maxTxbyt}"></span></span>
            &nbsp;平均<span class="description-percentage text-warning"><i class="fas fa-caret-left"></i> <span th:text="${avgTxbyt}">0</span></span>
            &nbsp;最低<span class="description-percentage text-success"><i class="fas fa-caret-up"></i> <span th:text="${minTxbyt}">17</span></span></div>
        </div>

        <div class="row  mb-2">
          <div class="col-sm-12" style="font-weight: 500">当前所有主机最近5分钟状态，5分钟系统负载：
            最高<span class="description-percentage text-danger"><i class="fas fa-caret-down"></i> <span th:text="${maxFiveLoad}">18</span></span>
            &nbsp;平均<span class="description-percentage text-warning"><i class="fas fa-caret-left"></i> <span th:text="${avgFiveLoad}">0</span></span>
            &nbsp;最低<span class="description-percentage text-success"><i class="fas fa-caret-up"></i> <span th:text="${minFiveLoad}">17</span></span>
            &nbsp;&nbsp;&nbsp;&nbsp;15分钟系统负载：最高<span class="description-percentage text-danger"><i class="fas fa-caret-down"></i> <span th:text="${maxFifteenLoad}"></span></span>
            &nbsp;平均<span class="description-percentage text-warning"><i class="fas fa-caret-left"></i> <span th:text="${avgFifteenLoad}">0</span></span>
            &nbsp;最低<span class="description-percentage text-success"><i class="fas fa-caret-up"></i> <span th:text="${minFifteenLoad}">17</span></span></div>
        </div>
        <div class="row">
          <!-- Left col -->
          <section class="col-lg-5 connectedSortable" title="当前所有主机最近5分钟内存状态">
            <!-- Custom tabs (Charts with tabs)-->
            <div id="chartMemInfo"></div>
            <!-- /.card -->
          </section>
          <section class="col-lg-2 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->
            <div style="font-weight: 500"><p><p>内存总和：<span class="description-percentage text-danger"><span th:text="${memSum}">18</span>G</span><p>
              CPU核数总和：<span class="description-percentage text-danger"><span th:text="${cpuCoresSum}">18</span></span><p>
              磁盘容量总和：<span class="description-percentage text-danger"><span th:text="${application.sumDiskSizeCache}">18</span></span></div>
            <!-- /.card -->
          </section>
          <section class="col-lg-5 connectedSortable" title="当前所有主机最近5分钟CPU状态">
            <!-- Custom tabs (Charts with tabs)-->
            <div  id="chartCpuInfo"></div>
            <!-- /.card -->
          </section>
        </div>

        <!-- Main row -->
        <div class="row">
          <!-- Left col -->
          <section class="col-lg-6 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->
            <div id="chartInfoList1"></div>
            <!-- /.card -->
          </section>
          <section class="col-lg-6 connectedSortable">
            <!-- Custom tabs (Charts with tabs)-->
            <div id="chartInfoList2"></div>
            <!-- /.card -->
          </section>

        </div>

        <!-- Main row -->
        <div class="row" th:if="${not #lists.isEmpty(dbTableList)}">

          <section class="col-lg-12 connectedSortable ui-sortable">
            <div id="dbTableList"> </div>
          </section>
        </div>


      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->
  </div>
  <div th:replace="common/chart.html"></div>
  <div th:replace="common/footerDashView.html"></div>

</div>
<!-- ./wrapper -->


<script th:inline="javascript">

  const data1 = [[${chartInfoList1}]];
  const data2 = [[${chartInfoList2}]];

  const data4 = [[${cpuInfoList}]];
  const data5 = [[${memInfoList}]];

  const chart4 = new G2.Chart({
    container: 'chartCpuInfo',
    height: 130,
    padding: 0
  });
  chart4.source(data4, {
    value: {
      min: 0,
      max: 100
    }
  });
  chart4.legend(false);
  chart4.axis(false);
  chart4.interval()
          .position('item*value')
          .color('item',['#FF5371','#FFD22F','#26CD7B'])
          // .shape('path', path => [ 'liquid-fill-path', path ])
          .shape('liquid-fill-gauge')
          .style({
            lineWidth: 10,
            opacity: 0.75
          });
  data4.forEach(row => {
    chart4.guide().text({
      top: true,
      position: {
        item: row.item,
        value: 50
      },
      content: `${row.value}%`,
      style: {
        opacity: 1,
        fontSize: 22,
        textAlign: 'center'
      }
    });
  });
  chart4.render();

  const chart5 = new G2.Chart({
    container: 'chartMemInfo',
    height: 130,
    padding: 0
  });
  chart5.source(data5, {
    value: {
      min: 0,
      max: 100
    }
  });
  chart5.legend(false);
  chart5.axis(false);
  chart5.interval()
          .position('item*value')
          .color('item',['#FF5371','#FFD22F','#26CD7B'])
          // .shape('path', path => [ 'liquid-fill-path', path ])
          .shape('liquid-fill-gauge')
          .style({
            lineWidth: 10,
            opacity: 0.75
          });
  data5.forEach(row => {
    chart5.guide().text({
      top: true,
      position: {
        item: row.item,
        value: 50
      },
      content: `${row.value}%`,
      style: {
        opacity: 1,
        fontSize: 22,
        textAlign: 'center'
      }
    });
  });
  chart5.render();

  const chart1 = new G2.Chart({
    container: 'chartInfoList1',
    forceFit: true,
    height: 400
  });
  chart1.source(data1, {
    percent: {
      formatter: val => {
      val = (val * 100) + '%';
  if(val.length > 10 ){
    val = val.substr(0,5)+'%';
  }
  return val;
  }
  }
  });
  chart1.tooltip({
    showTitle: false,
    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
  });
  chart1.coord('theta', {
    startAngle: Math.PI, // 起始角度
    endAngle: Math.PI * (3 / 2) // 结束角度
  });
  chart1.intervalStack()
          .position('percent')
          .color('item',['#FF5371','#FFD22F','#26A3FF','#26CD7B']);
  chart1.render();

  const chart3 = new G2.Chart({
    container: 'chartInfoList2',
    forceFit: true,
    height: 400
  });
  chart3.source(data2, {
    percent: {
      formatter: val => {
      val = (val * 100) + '%';
  if(val.length > 10 ){
    val = val.substr(0,5)+'%';
  }
  return val;
  }
  }
  });
  chart3.coord('theta');
  chart3.tooltip({
    showTitle: false,
  });
  chart3.intervalStack()
          .position('percent')
          .color('item',['#FF5371','#FFD22F','#26A3FF','#26CD7B'])
          .tooltip('item*percent', (item, percent) => {
    percent = (percent * 100) + '%';
  if(percent.length > 10 ){
    percent = percent.substr(0,5)+'%';
  }
  return {
    name: item,
    value: percent
  };
  })
  .style({
    lineWidth: 1,
    stroke: '#fff'
  });
  chart3.render();


  const dataTable = [[${dbTableList}]];
  if(dataTable.length>0) {
    const chart2 = new G2.Chart({
      container: 'dbTableList',
      forceFit: true,
      height: 400
    });
    chart2.source(dataTable);
    chart2.scale('value', {
      tickInterval: 20
    });
    chart2.source(dataTable, {
      value: {
        min: 0,
        nice: false,
        alias: '数据监控'
      }
    });
    chart2.axis('value', {
      label: null,
      title: {
        offset: 30,
        textStyle: {
          fontSize: 12,
          fontWeight: 300
        }
      }
    });
    chart2.interval().position('remark*value').size(28);
    chart2.render();
  }
</script>
</body>
</html>
